<!--  -->
<template>
  <div class="order-list">
      <HeaderTop title="订单列表"></HeaderTop>
      <div class="order-container">
        <div class="order-search">
          <!-- 交易时间 -->
          <div class="order-date">
            <span class="title">交易时间：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              class="ordlistime"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <!-- 交易状态 -->
          <div class="order-state">
            <span class="title">交易状态：</span>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> 
          </div>
          <!-- 支付方式 -->
          <div class="order-pay">
            <span class="title">支付方式：</span>
            <el-select v-model="value3" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
          </div>
          <el-button class="order-btn" plain @click="reqConditionOrderInfos()">搜索</el-button>
        </div>

        <div class="order-mian">
          <!-- 订单表格 -->
          <el-table max-height="700" class="order-table" :data="tableData" style="width: 100%" :span-method="objectSpanMethod"
          :cell-class-name="tableRowClassName" @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter">
            <el-table-column prop="orderNo" label="订单编号" width="180"></el-table-column>
            <el-table-column  label="商品">
              <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderDetailList" :key="index" class="borderbot">
                  {{item.goodsName}}
                </div>
              </template>
            </el-table-column>
            <el-table-column  label="商品单价(元)">
              <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderDetailList" :key="index" class="borderbot">
                  {{item.goodsPrice}}
                </div>
              </template>
            </el-table-column>
            <el-table-column  label="数量">
              <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.orderDetailList" :key="index" class="borderbot">
                  {{item.goodsNum}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="userName" label="买家"></el-table-column>
            <el-table-column label="交易状态">
              <template slot-scope="scope">
                <p v-if="scope.row.orderStatus==1">未付款</p><p v-if="scope.row.orderStatus==2">待发货</p>
                <p v-if="scope.row.orderStatus==3">待收货</p><p v-if="scope.row.orderStatus==4">待评价</p><p v-if="scope.row.orderStatus==5">订单完成</p>
                <p v-if="scope.row.orderStatus==6">已退款</p><p v-if="scope.row.orderStatus==7">退款审核中</p><p v-if="scope.row.orderStatus==8">拒绝退款</p>
                <p v-if="scope.row.orderStatus==9">退款中</p>
              </template>
            </el-table-column>
            <el-table-column prop="orderAmountTotal" label="实付款(元)"></el-table-column>
            <el-table-column prop="espressFee" label="运费(元)"></el-table-column>
            <el-table-column label="支付方式">
              <template slot-scope="scope">
                  {{scope.row.payChannel | paymethod }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
            <el-table-column  class="order-detail" label="订单详情">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="reqOrderInfoDetail(scope.row.id)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="reqDeliveGoods(scope.row.id)" size="small" v-if="scope.row.orderStatus==2">确认发货</el-button>
                <el-button @click="reqPayment(scope.row.id)" size="small" v-if="scope.row.orderStatus==1">确认付款</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Modal class="model" v-model="modal1" width="1014" height="669" :mask-closable="false" :styles="{top:'230px',left:'180px'}">
            <div v-if="modaldata">
              <p slot="header" style="width:1012px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
                <span>订单详情</span>
              </p>
              <div class="main" style="line-height:35px;display:flex;flex-wrap:wrap;width:850px;margin:0 60px;font-size:18px;font-weight:bold">
                <p style="width:40%">订单编号：<span>{{modaldata.orderInfo.orderNo}}</span></p>
                <p style="width:30%">下单时间：<span style="font-size:16px">{{modaldata.orderInfo.createTime}}</span></p>
                <p style="width:30%">订单完成时间：<span style="font-size:14px">{{modaldata.orderInfo.deliveryTime}}</span></p>
                <p style="width:40%">买家姓名：<span>{{modaldata.nickName}}</span></p>
                <p style="width:30%">支付方式：<span>{{modaldata.orderInfo.payChannel | paymethod}}</span></p>
                <p style="width:30%">支付时间：<span style="font-size:16px">{{modaldata.orderInfo.paidTime}}</span></p>
                <p style="width:40%">支付流水单：<span  style="font-size:13px">{{modaldata.orderInfo.payTradeNo}}</span></p>
                <p style="width:30%">订单状态：
                  <span v-if="modaldata.orderInfo.orderStatus==1">未付款</span><span v-if="modaldata.orderInfo.orderStatus==2">待发货</span>
                  <span v-if="modaldata.orderInfo.orderStatus==3">待收货</span><span v-if="modaldata.orderInfo.orderStatus==4">待评价</span>
                  <span v-if="modaldata.orderInfo.orderStatus==5">订单完成</span><span v-if="modaldata.orderInfo.orderStatus==6">已退款</span>
                  <span v-if="modaldata.orderInfo.orderStatus==7">退款审核中</span><span v-if="modaldata.orderInfo.orderStatus==8">拒绝退款</span>
                  <span v-if="modaldata.orderInfo.orderStatus==9">退款中</span>
                </p>
              </div>
              <el-table size="small" show-summary :data="modaldata.orderDetails" border style="width: 850px;margin:0 60px">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="goodsNo" label="商品编号"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称"></el-table-column>
                <el-table-column prop="goodsPrice" label="单价" width="100"></el-table-column>
                <el-table-column prop="goodsNum" label="数量" width="100"></el-table-column>
              </el-table>
              <div class="total" style="display:flex;height:35px;line-height:35px;width:850px;border:1px solid;margin:10px 60px;padding:0 20px;">
                <p>商品总金额：<span>{{modaldata.orderInfo.itemAmountTotal}}元</span></p>
                <p>+运费：<span>{{modaldata.orderInfo.espressFee}}元</span></p>
                <p>-优惠：<span>{{modaldata.couponPrice}}元</span></p>
                <p style="margin-left:400px"><span>订单合计金额：{{modaldata.orderInfo.orderAmountTotal}}</span></p>
              </div>
              <div slot="footer" style="font-size:18px;width:850px;margin:0 60px 20px;">
                <div class="address" style="display:flex;justify-content:space-between">
                  <p>收货方名称：<span>{{modaldata.orderInfo.receiverName}}</span></p>
                  <p>联系方式：<span>{{modaldata.orderInfo.receiverPhone}}</span></p>
                  <p>收货地址：<span>{{modaldata.orderInfo.receiverAddress}}</span></p>
                </div>                 
              </div>
            </div>
          </Modal>
          <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
export default {
  data () {
    return {
      modal1:false,
      goodsid:"",
      currentPage1: 1,
      value1:"",
      modaldata:"",
      options1: [{
          value: 1,
          label: '未付款'
        }, {
          value: 2,
          label: '待发货'
        }, {
          value: 3,
          label: '待收货'
        }, {
          value: 4,
          label: '待评价'
        }, {
          value: 5,
          label: '订单完成'
        }],
      options2: [{
          value: 1,
          label: '支付宝'
        }, {
          value: 2,
          label: '微信'
        }, {
          value: 3,
          label: '财务确认'
        }, {
          value: 4,
          label: '无'
        }],
      value2: '',
      value3: '',
      tableData: [],
      rowIndex:'-1',
      OrderIndexArr:[], //需要合并的项
      hoverOrderArr: [], 
      tableData2: [],
      total:1,
      stus:0
    };
  },

  components: {
    HeaderTop
  },
  created(){
    this.reqConditionOrderInfos()
  },
  computed: {},
  mounted(){
    this.getOrderNumber()
  },
  filters:{
    paymethod(val){
      if(val==1){
        return val="支付宝"
      }else if(val==2){
        return val="微信"
      }else if(val==3){
        return val="财务确认"
      }else{
        return val="无"
      }
    }
  },
  methods: {
    async reqConditionOrderInfos () {
      if(this.value1==null){
        this.value1=""
      }
      if(this.value2){
        this.stus=1
      }
      const params = {
        createTime:this.value1,
        orderStatus:this.value2,
        payChannel:this.value3,
        num:this.currentPage1,
        status:this.stus,
        size:10,
        token:sessionStorage.getItem("token"),
        managerInfoId:sessionStorage.getItem('userId')
      }
      console.log(params)
      console.log(params.createTime)
      const result = await this.API.reqConditionOrderInfos(params)
      console.log(result)
      if (result.retCode == '000') {
        console.log('订单查询',result)
        this.tableData=result.retData.orderInfoSubs
        this.total=result.retData.count
        console.log(this.tableData)
      }
    }, 
    async reqOrderInfoDetail (id) {
      this.modal1=true
      const params = {
        orderInfoId:id,
        token:sessionStorage.getItem("token"),
        managerInfoId:sessionStorage.getItem('userId')
      }
      console.log(params)
      const result = await this.API.reqOrderInfoDetail(params)
      console.log(result)
      if (result.retCode == '000') {
        console.log('订单详情',result)
        this.modaldata=result.retData
      }
    },
    async reqDeliveGoods (id) {
      const params = {
        orderInfoId:id,
        token:sessionStorage.getItem("token"),
        managerInfoId:sessionStorage.getItem('userId')
      }
      console.log(params)
      const result = await this.API.reqDeliveGoods(params)
      console.log(result)
      if (result.retCode == '000') {
        console.log('确认发货',result)
        this.$message.success(result.retMsg)
        this.reqConditionOrderInfos()
      }
    },
    async reqPayment (id) {
      const params = {
        orderInfoId:id,
        token:sessionStorage.getItem("token"),
        managerInfoId:sessionStorage.getItem('userId')
      }
      console.log(params)
      const result = await this.API.reqPayment(params)
      console.log(result)
      if (result.retCode == '000') {
        console.log('确认付款',result)
        this.$message.success(result.retMsg)
        this.reqConditionOrderInfos()
      }
    },
    // 获取相同编号的数组
    getOrderNumber(){
      let OrderObj = {}
      this.tableData.forEach((item,index)=>{
        item.rowIndex = index
        if(OrderObj[item.ordernum]){
          OrderObj[item.ordernum].push(index)
        }else{
          OrderObj[item.ordernum] = []
          OrderObj[item.ordernum].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.OrderIndexArr中
      for(let k in OrderObj){
        if(OrderObj[k].length > 1){
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
    },
    // 合并单元格逻辑
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      // 除了1/2/3列不合并 其余都合并
      if(columnIndex !== 1 && columnIndex !== 2 && columnIndex !== 3){
       for(let i = 0; i<this.OrderIndexArr.length; i++){
         let element = this.OrderIndexArr[i]
         for(let j = 0; j<element.length; j++){
           let item = element[j]
           if(rowIndex == item){
             if(j==0){
               return {
                 rowspan:element.length,
                 colspan:1
               }
             }else if(j !== 0){
               return {
                 rowspan:0,
                 colspan:0
               }
             }
           }
         }
       }
      }
    },
    // 解决合并单元格样式bug
    tableRowClassName({row,rowIndex}) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    // 合并单元格在鼠标进入时
    cellMouseEnter(row, column, cell, event) {
      this.rowIndex = row.rowIndex;
      this.hoverOrderArr = [];
      this.OrderIndexArr.forEach(element => {
          if (element.indexOf(this.rowIndex) >= 0) {
            this.hoverOrderArr = element
          }
      })
    },
    // 合并单元格在鼠标离开时
    cellMouseLeave(row, column, cell, event) {
      this.rowIndex = '-1'
      this.hoverOrderArr = [];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage1=val
      this.reqConditionOrderInfos()
      console.log(`当前页: ${val}`);
      console.log('当页',this.currentPage1)
    }
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(210,210,210,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
  .el-table .hovered-row
      background #f5f7fa
  
</style>

<style lang='stylus' scoped>
.order-list
  height 100%
  .order-container
    height 100%
    .order-search
      height 90px
      display flex
      align-items center
      .title
        color #fff
        font-size 19px
      .order-state,
      .order-pay,
      .order-btn
        margin-left 25px
    .order-mian
      position relative
      
      height 763px
      .order-table
        border-top-left-radius 15px
        border-top-right-radius 15px
        .main
          color red
      .block
        position absolute
        bottom 10px
        margin-left 400px
</style>